<template>
    <div>
        <div class="card shadow-sm mb-2" v-for="(comment,index) in comments" :key="index">
            <div class="card-header bg-white d-flex justify-content-start align-items-center">
                <img
                    :src='comment.user.icon'
                    class="rounded mr-3 avatar35">
                <div class="flex-fill">
                    <div class="text-secondary">
                        <a href="#">{{comment.user.name}}</a>
                    </div>
                    <span class="small text-black-50">
                       <i aria-hidden="true" class="fa fa-clock-o"></i>{{comment.created_at}}
                    </span>
                </div>
            </div>
            <div class="card-body text-secondary pb-5">
                <a href="#" v-if="comment.reply_user">@ {{comment.reply_user.name}}</a>
                <div class="markdown mt-2" v-html="comment.html" v-highlight>
                </div>
            </div>
            <div class="card-footer text-muted bg-white small">
                # {{index+1}}
                <a v-if="user" href="#" class="d-inline-block mr-2 ml-2" @click.prevent="replyFocus(comment)">
                    <i aria-hidden="true" class="fa fa-reply"></i>
                    回复
                </a>
                <a href="#" class="d-inline-block mr-2 ml-2" @click.prevent="del(comment,index)"
                   v-if="isAdmin || (user && comment.user.id==user.id)">
                    <i aria-hidden="true" class="fa fa-reply"></i>
                    删除
                </a>
            </div>
        </div>
        <div id="commentForm">
            <div class="card">
                <div class="card-header">
                    <span v-if="reply_user.id">
                        回复:{{reply_user.name}}
                        <a href="#" @click.prevent="reply_user={}"><i class="fas fa-times-circle"></i>
</a>
                    </span>
                    <span v-else>发表评论</span>
                </div>
                <div>

                    <editor name="content" :error="error"
                            :content.sync="form.content"
                            ref="editor"
                            initialEditType="wysiwyg"
                            :key="editorId"
                    ></editor>


                    <div class="text-secondary mt-2 p-2 d-block mb-2"><i
                        class="fas fa-info-circle"></i>
                        你可以在编辑器底部切换为markdown模式，编辑器也支持托放上传图片。
                    </div>
                </div>
                <div class="card-footer text-muted">
                    <button type="button" class="btn btn-primary btn-sm d-inline-block" @click="submit">保存</button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>

    // import Editor from "./Editor";

    export default {
        // components: {
        //     Editor
        // },
        props: {
            error: {default: ''},
            model: {required: true, type: String},
            id: {required: true}
        },
        data() {
            return {
                form: {
                    content: '',
                },
                comments: [],
                editorId: 0,
                reply_user: {},
                user: {},
                isAdmin: ''
            }
        },
        mounted: function () {
            this.load()
        },
        methods: {
            async submit() {
                if (this.form.content.length < 10) {
                    this.$message.error('评论内容不能少于10个字')
                    return
                }

                //this->$data,其实是调用data的全部数据
                let post = {...this.form,preUrl:window.location.href};
                if (this.reply_user.id) {
                    post.reply_user_id = this.reply_user.id;
                }
                let res = await this.axios.post(`Edu/${this.model}/${this.id}/comment`, post)
                if(typeof(res) =='string'){
                    location.href=res;
                    return ;
                }
                let {comment}=res;
                this.comments.push(comment)
                this.editorId++
                this.form.content = ''
                this.reply_user = {}


            },
            async load() {
                let {
                    data: comments,
                    meta: {user, is_admin}
                } = await this.axios.get(`Edu/${this.model}/${this.id}/comment`);
                this.comments = comments
                this.user = user;
                this.isAdmin = is_admin;
            },
            async del(comment, index) {
                this.$confirm('此操作将永久删除该评论, 是否继续?', '温馨提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    const url = `Edu/${this.model}/${this.id}/comment/${comment.id}`;
                    await this.axios.delete(url);
                    this.comments.splice(index, 1)
                }).catch(() => {
                });
            },
            replyFocus(comment){
                let el=document.querySelector('#commentForm');
                el.scrollIntoView({behavior:'smooth'});
                this.reply_user=comment.user
                // this.$refs.editor.getFocus()
            }

        }
    }
</script>

<style lang="scss">
    .tui-editor-defaultUI {
        border: none;
    }
</style>
